<template>
    <div class="card rdsp-card-view" data-page="ninePlace">
        <div class="card-content rank-content card-content-padding" style="padding:0">
            <div class="ninePlace-container">
              <div class="swiper-container" id="ninePlace-banner-container">
                  <div class="swiper-pagination"></div>
                  <div class="swiper-wrapper" id="ninePlace-banner-swaper"></div>
              </div>
            </div>
            <div class="ninePlace-notice">
                <div class="ninePlace-left">
                  <img src="{{staticPath}}img/notice.png" alt="">
                </div>
                <div class="ninePlace-right">
                    <div  class="swiper-container" id="ninePlace-notice-container">
                        <div class="swiper-wrapper" id="ninePlace-notice-swaper"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .ninePlace-container{
        width: 100%;
    }
    .ninePlace-container .swiper-pagination-bullet-active {
        background: #E1E1E1 !important;
    }
    .ninePlace-container .swiper-slide{
        width: 100% !important;
        height: 180px;
    }
    .ninePlace-container .swiper-slide img{
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }
    .ninePlace-notice{
        width: 100%;
        height: 50px;
        padding: 8px 0;
    }
    .ninePlace-left{
        float: left;
        width: 25%;
        height: 100%;
        text-align: center;
    }
    .ninePlace-left img{
      width: 55px;
      height: 30px;
      padding-top: 10px;
    }
    .ninePlace-right{
        float: left;
        width: 75%;
    }
    .every-notice-list{
        width: 100%;
        display: inline-block;
    }
    .every-notice-list span{
        float: left;

    }
    .notice-finish,.notice-error{
      width: 40px;
      background: rgba(119,190,7,0.3);
      border-radius: 2px;
      color: #77BE07 !important;
      text-align: center;
      font-size: 12px;
    }
    .notice-error{
      color: #F62729 !important;
      background:rgba(254,102,104,0.3);
    }
    .notice-text{
      font-size: 12px;
      color: #333;
      float: left;
      margin-left: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 72%;
    }
    .ninePlace-notice .swiper-slide{
      height: auto !important;
      margin-bottom:0px !important;
      margin-top: 1px;
    }
    .ninePlace-notice .swiper-container{
      height: 50px;
    }
</style>

<script>
    return {
        data: function () {
          return {
            
          }
        },
        methods: {
          //轮播
          getNineBanner:function(){
            var html = "";
            $("#ninePlace-banner-swaper").empty();
            Dao.getNineNotice({
               userName: userInfor.accountName,
               deviceId: appKeyObj.deviceId,
               orgId:userInfor.organizationIds,
               queryType:0,
               pageSize:100,
               pageIndex:1,
               status:1
            },function(data){
                if(data && data.length>0){
                  for(var i=0;i<data.length;i++){
                    html += `<div class="swiper-slide" >
                        <img src="`+data[i].thumbnailImg+`" class="every-banner" id="`+data[i].id+`">
                    </div>`;
                  }
                  $("#ninePlace-banner-swaper").append(html);

                  if(data.length==1){
                     var bannerSwiper = new Swiper('#ninePlace-banner-container', {
                      direction: 'horizontal',
                      slidesPerView:1,
                      loop: false,
                      autoplay: false,
                      // 如果需要分页器 
                      pagination: {
                          el: '',
                      },
                     });
                  }else{
                     var bannerSwiper = new Swiper('#ninePlace-banner-container', {
                      direction: 'horizontal',
                      slidesPerView:1,
                      loop: true,
                      autoplay: true,
                      // 如果需要分页器 
                      pagination: {
                          el: '.swiper-pagination',
                      },
                     });
                  }
                  
                  jQuery(".every-banner").click(function(){
                    var tid = jQuery(this).attr("id");
                    app.router.navigate(`/ninePlaceDetail/`+tid+`/`);
                  });
                }
            });
          },
          //公告
          getNoticeList:function(){
            var html = "";
            $("#ninePlace-notice-swaper").empty();
            Dao.getInspectNotice({
               userName: userInfor.accountName,
               deviceId: appKeyObj.deviceId,
               orgId:userInfor.organizationIds,
               venuesId:nineCode
            },function(data){
                if(data && data.length>0){
                  for(var i=0;i<data.length;i++){
                    var icon = `<span class="notice-finish">完成</span>`;
                    var text = "完成";
                    if(data[i].result == 1){
                      icon = `<span class="notice-error">未完成</span>`;
                      text = "未完成";
                    }
                    html += `<div class="swiper-slide">
                            <div class="every-notice-list">
                              `+ icon +`
                              <div class="notice-text">`+data[i].taskName+text+`</div>
                            </div>
                        </div>`;
                  }
                  $("#ninePlace-notice-swaper").empty().append(html);
                  if(data.length>2){
                    bannerSwiper_lb = new Swiper('#ninePlace-notice-container', {
                      direction: 'vertical',
                      slidesPerView:2,
                      loop: true,
                      autoplay: true,
                      speed:400,
                    });
                  }
                  
                }
            });
          }
        },
        on: {
            pageInit: function(e, page) {
              var self = this;
              if(nineCode){
                self.getNoticeList();
                self.getNineBanner();
              }
            },
        }
    }
</script>
